<template>
	<view class="code-page">
		<swiper class="swiper" :indicator-dots="true" :autoplay="false" :duration="500" :current="current">
			<swiper-item v-for="(item, index) in orderItems" :key="index" class="swiper-item">
				<view class="code-card">
          <view class="ticket-name" v-if="item.parent_product_id">套票-{{item.parent_product_name}}</view>
          <view class="ticket-name">{{item.product_name}}</view>
					<view class="code-content">
						<view class="code-number" @click="copyCode(item.code)">
							<text class="code-text">{{item.code}}</text>
							<view class="copy-icon">📋</view>
						</view>
						<view class="code-qr">
							<image style="width: 300rpx;height: 300rpx" :src="item.code_url"></image>
						</view>
						<view class="code-status" :class="{'verified': item.status === 1}">
							{{item.status === 1 ? '已核销' : '待核销'}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderItems: [],
				current: 0,
				timer: null,
				orderId: null
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId
				this.getOrderDetail(options.orderId)
				this.startTimer()
			}
		},
		onUnload() {
			this.clearTimer()
		},
		methods: {
			startTimer() {
				this.clearTimer()
				this.timer = setInterval(() => {
					if (this.orderId) {
						this.getOrderDetail(this.orderId)
					}
				}, 5000)
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			async getOrderDetail(id) {
				try {
					const res = await this.$api.getOrderCodeList({ order_id: id })
					this.orderItems = res.sort((a, b) => {
						if (a.status === b.status) return 0;
						if (a.status === 0) return -1;
						if (b.status === 0) return 1;
						return a.status - b.status;
					})
				} catch (e) {
					console.error(e)
					uni.showToast({
						title: '获取订单信息失败',
						icon: 'none'
					})
				}
			},
			// 复制核销码
			copyCode(code) {
				if (!code) {
					uni.showToast({
						title: '核销码为空',
						icon: 'none'
					})
					return
				}
				
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: '核销码已复制',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.code-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.swiper {
		height: 800rpx;

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.code-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 90%;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);

		.ticket-name {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
			color: #333;
		}

		.code-content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.code-number {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f8f9fa;
				border: 2rpx dashed #ddd;
				border-radius: 12rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 30rpx;
				cursor: pointer;
				transition: all 0.3s ease;
				min-width: 400rpx;
				
				&:active {
					background-color: #e9ecef;
					transform: scale(0.98);
				}

				.code-text {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					letter-spacing: 2rpx;
					margin-right: 15rpx;
				}

				.copy-icon {
					font-size: 28rpx;
					color: #007aff;
					opacity: 0.8;
				}
			}

			.code-qr {
				margin: 20rpx 0;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			}

			.code-status {
				font-size: 30rpx;
				font-weight: 600;
				color: #ff6b00;
				margin-top: 20rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 107, 0, 0.1);

				&.verified {
					color: #28a745;
					background-color: rgba(40, 167, 69, 0.1);
				}
			}
		}
	}
}
</style>
